<template>
	<view class="patrol_style" scroll-y="false">
		<!-- <view class="topSearch">
			<u-search placeholder="日照香炉生紫烟" v-model="keyword" :animation="false" :showAction="false"></u-search>
		</view> -->
		<view class="dropdown_top">
			<view v-if="!patrol" @click="patrolChange" class="dropdown_text">巡查时间</view>
			<view @click="patrolChange" v-else class="dropdown_left">
				<view style="display: flex">
					巡查时间
					<u-icon @click="patrolIcon" style="margin-left: 22rpx" name="reload" color="#323233" size="16"></u-icon>
				</view>
				<view>{{ patrol }}</view>
			</view>
			<zb-dropdown-menu style="width: 50%">
				<zb-dropdown-item name="整改状态" :options="option" v-model="fication" @change="ficationChange"></zb-dropdown-item>
			</zb-dropdown-menu>
		</view>

		<scroll-view @scrolltolower="loadMoreData" scroll-y="true" enable-back-to-top="true" lower-threshold="112" class="scrollbox">
			<view @click="contentBtnok" class="content_scroll" v-for="(item, index) in patrolRecord" :key="index">
				<view class="content_top">
					<view>
						<image style="width: 50rpx; height: 50rpx" src="../../static/mappages/patrol/xc.png" mode=""></image>
						<text style="margin-left: 20rpx">{{ item.assignee || '- -' }}</text>
						<text style="margin-left: 20rpx">{{ item.patrolTime || '- -' }}</text>
					</view>
					<view>
						<text
							:style="{
								color:
									item.rcodResultCode == 0
										? '#78b0fb'
										: item.rcodResultCode == 1
										? '#68cc4a'
										: item.rcodResultCode == 2
										? '#e8ba59'
										: item.rcodResultCode == 3
										? '#bc3030'
										: '#9a9a9a'
							}"
							style="margin-right: 20rpx"
						>
							{{ item.rcodResultCode_dictText }}
						</text>
						<u-icon name="arrow-right" color="#000" size="16"></u-icon>
					</view>
				</view>
				<view class="content_center">
					<text>{{ item.patrolLocation || '- -' }}</text>
					<text>{{ item.rvResult || '- -' }}</text>
				</view>
				<!-- 	<view class="content_button">
					<u-album :urls="item.img"></u-album>
				</view> -->
			</view>
			<u-loading-icon style="margin-top: 50rpx" v-if="noticeInfo.isBoolean"></u-loading-icon>
			<uni-load-more v-if="!noticeInfo.isBoolean" status="暂无更多" />
		</scroll-view>
		<!-- 巡查时间 -->
		<uni-calendar
			ref="calendar"
			class="uni-calendar--hook"
			:clear-date="true"
			:date="info.date"
			:insert="info.insert"
			:lunar="info.lunar"
			:startDate="info.startDate"
			:endDate="info.endDate"
			:range="info.range"
			@confirm="confirm"
			@close="close"
		/>
	</view>
</template>

<script>
function getDate(date, AddDayCount = 0) {
	if (!date) {
		date = new Date();
	}
	if (typeof date !== 'object') {
		date = date.replace(/-/g, '/');
	}
	const dd = new Date(date);

	dd.setDate(dd.getDate() + AddDayCount); // 获取AddDayCount天后的日期

	const y = dd.getFullYear();
	const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1; // 获取当前月份的日期，不足10补0
	const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate(); // 获取当前几号，不足10补0
	return {
		fullDate: y + '-' + m + '-' + d,
		year: y,
		month: m,
		date: d,
		day: dd.getDay()
	};
}
import { getrvPatrolRecord } from '@/api/mappages/lake/lake.js';
export default {
	components: {},
	data() {
		return {
			showCalendar: false,
			info: {
				lunar: true,
				range: true,
				insert: false,
				selected: []
			},
			keyword: '',
			albumWidth: 0,
			urls1: ['https://cdn.uviewui.com/uview/album/1.jpg', 'https://cdn.uviewui.com/uview/album/2.jpg', 'https://cdn.uviewui.com/uview/album/3.jpg'],
			patrol: '', //巡查时间
			fication: 5, //整改状态
			option: [
				{
					text: '已登记',
					value: 0
				},
				{
					text: '交办中',
					value: 1
				},
				{
					text: '已整改',
					value: 2
				},
				{
					text: '已退回',
					value: 3
				},
				{
					text: '已归档',
					value: 4
				},
				{
					text: '记录状态(全部)',
					value: 5
				}
			],
			patrolRecord: [],
			noticeInfo: {
				page: 1,
				size: 10,
				isBoolean: true
			}
		};
	},
	methods: {
		isNoticeFow() {
			let brr = {
				// keyWord: this.keyword,
				page: this.noticeInfo.page,
				size: this.noticeInfo.size,
				patrolTime: this.patrol,
				rcodResultCode: this.fication == 5 ? '' : this.fication
			};
			getrvPatrolRecord(brr).then((res) => {
				if (!res.result) return (this.noticeInfo.isBoolean = false);
				if (this.noticeInfo.page > 1 && res.result.total >= this.noticeInfo.size) {
					const previousData = [...this.patrolRecord];
					this.patrolRecord = [...previousData, ...res.result.records];
				} else {
					this.noticeInfo.isBoolean = true;
					this.patrolRecord = res.result.records;
				}

				if (res.result.total === this.patrolRecord.length) {
					this.noticeInfo.isBoolean = false;
				}
			});
		},
		// 触底刷新事件
		loadMoreData() {
			this.noticeInfo.page += 1;
			!this.noticeInfo.isBoolean ? '' : this.isNoticeFow();
			console.log('触底更新');
		},
		close() {
			console.log('弹窗关闭');
		},
		confirm(e) {
			this.patrol = e.range.before + '-' + e.range.after;
			this.createdFun();
			console.log('confirm 返回:', e);
		},
		patrolChange() {
			this.$refs.calendar.open();
			this.patrol = '';
		},
		patrolIcon() {
			event.stopPropagation();
			this.patrol = '';
			this.createdFun();
		},
		//整改状态
		ficationChange() {
			this.createdFun();
		},
		//河道巡查 点击事件
		contentBtnok(item) {
			console.log(item, '河道巡查');
			this.$tab.navigateTo('/mappages/lake/details/rectiDetails');
		},
		createdFun() {
			this.patrolRecord = [];
			this.noticeInfo = {
				page: 1,
				size: 10,
				isBoolean: true
			};
			this.isNoticeFow();
		}
	},
	onLoad(options) {
		setTimeout(function () {
			console.log('start pulldown');
		}, 1000);
		uni.startPullDownRefresh();
		this.isNoticeFow();
	},
	onPullDownRefresh() {
		console.log('下拉刷新');
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	}
};
</script>

<style scoped>
.scrollbox {
	height: calc(100vh - 200rpx);
}
.example-body {
	padding: 12px;
	background-color: #ffffff;
}

.result-box {
	text-align: center;
	padding: 20px 0px;
	font-size: 16px;
}

.patrol_style {
	/* padding: 20rpx; */
	width: 100%;
	overflow-y: hidden;
}

.dropdown_top {
	display: flex;
}

.dropdown_text {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	box-shadow: 2rpx 2rpx 5rpx rgba(190, 190, 190, 0.5), -2rpx -2rpx 5rpx rgba(255, 255, 255, 0.5);
	z-index: 100;
	font-size: 26rpx;
	color: #323233;
	background-color: #fff;
}

.dropdown_left {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-around;
	width: 50%;
	margin-left: 10rpx;
	box-shadow: 2rpx 2rpx 5rpx rgba(190, 190, 190, 0.5), -2rpx -2rpx 5rpx rgba(255, 255, 255, 0.5);
	z-index: 100;
	background-color: #fff;
}

.dropdown_left view:nth-child(1) {
	font-weight: 600;
	font-size: 26rpx;
	color: #323233;
}

.dropdown_left view:nth-child(2) {
	font-size: 22rpx;
}

.content_scroll {
	margin-top: 20rpx;
	width: 100%;
	background-color: #fff;
	padding: 10rpx;
}

.content_top {
	display: flex;
	justify-content: space-between;
}

.content_top view {
	display: flex;
	align-items: center;
}

.content_center {
	display: flex;
	flex-direction: column;
	color: #000;
}

.content_center text:nth-child(1) {
	color: #000;
	margin: 10rpx 0;
	font-weight: 700;
}

.content_center text:nth-child(2) {
	color: #666666;
	font-family: PingFangSC-Regular;
	letter-spacing: 2rpx;
}

.content_button {
	margin: 20rpx 0;
}

.album {
	@include flex;
	align-items: flex-start;

	&__avatar {
		background-color: $u-bg-color;
		padding: 5px;
		border-radius: 3px;
	}

	&__content {
		margin-left: 10px;
		flex: 1;
	}
}

.topSearch {
	/* margin-top: 10rpx; */
	padding: 10rpx;
	background-color: #fff;
}
</style>
